<h1>Tab Nav Bar</h1>

<div class="demo-nav-bar">
  <nav md-tab-nav-bar aria-label="weather navigation links">
    <a md-tab-link
       *ngFor="let tabLink of tabLinks; let i = index"
       [routerLink]="tabLink.link"
       [active]="activeLinkIndex === i"
       (click)="activeLinkIndex = i">
      {{tabLink.label}}
    </a>
  </nav>
  <router-outlet></router-outlet>
</div>


<h1>Tab Group Demo - Dynamic Tabs</h1>

<md-card>
  <md-card-title>Add New Tab</md-card-title>
  <md-card-content>
    <md-checkbox [(ngModel)]="createWithLongContent">
      Include extra content
    </md-checkbox>
    <md-checkbox [(ngModel)]="gotoNewTabAfterAdding">
      Select after adding
    </md-checkbox>
    <div>
      Position:
      <md-input type="number" [(ngModel)]="addTabPosition"></md-input>
    </div>
    <button md-raised-button color="primary"
            (click)="addTab(createWithLongContent)">
      Add
    </button>
  </md-card-content>
</md-card>

<div>
  Selected tab index:
  <md-input type="number" [(ngModel)]="activeTabIndex"></md-input>
</div>
<md-tab-group class="demo-tab-group"
              md-dynamic-height
              [(selectedIndex)]="activeTabIndex">
  <md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
    <template md-tab-label>{{tab.label}}</template>
    {{tab.content}}
    <br>
    <br>
    <div *ngIf="tab.extraContent">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
      orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
      gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
      diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
      ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
      venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
      Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
      orci posuere, nec luctus mauris semper.
      <br>
      <br>
      Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
      magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
      Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
      Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
      tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
      nisl consectetur, rhoncus sapien sit amet, tempus sapien.
      <br>
      <br>
      Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
      molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
      at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
      Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
    </div>
    <br>
    <br>
    <md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
    <br><br>
    <button md-raised-button
            [disabled]="dynamicTabs.length == 1"
            (click)="deleteTab(tab)">
      Delete Tab
    </button>
  </md-tab>
</md-tab-group>

<h1>Tab Group Demo - Dynamic Height</h1>

<md-tab-group class="demo-tab-group" md-dynamic-height>
  <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
    <template md-tab-label>{{tab.label}}</template>
    {{tab.content}}
    <br>
    <br>
    <div *ngIf="tab.extraContent">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
      orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
      gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
      diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
      ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
      venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
      Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
      orci posuere, nec luctus mauris semper.
      <br>
      <br>
      Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
      magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
      Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
      Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
      tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
      nisl consectetur, rhoncus sapien sit amet, tempus sapien.
      <br>
      <br>
      Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
      molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
      at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
      Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
    </div>
    <br>
    <br>
    <md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
  </md-tab>
</md-tab-group>


<h1>Tab Group Demo - Fixed Height</h1>

<md-tab-group class="demo-tab-group" style="height: 200px">
  <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
    <template md-tab-label>{{tab.label}}</template>
    {{tab.content}}
    <br>
    <br>
    <div *ngIf="tab.extraContent">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
      orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
      gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
      diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
      ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
      venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
      Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
      orci posuere, nec luctus mauris semper.
      <br>
      <br>
      Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
      magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
      Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
      Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
      tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
      nisl consectetur, rhoncus sapien sit amet, tempus sapien.
      <br>
      <br>
      Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
      molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
      at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
      Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
    </div>
    <br>
    <br>
    <md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
  </md-tab>
</md-tab-group>

<h1>Stretched Tabs</h1>

<md-tab-group class="demo-tab-group" style="height: 200px" md-stretch-tabs>
  <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
    <template md-tab-label>{{tab.label}}</template>
    {{tab.content}}
  </md-tab>
</md-tab-group>


<h1>Async Tabs</h1>

<md-tab-group class="demo-tab-group">
  <md-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
    <template md-tab-label>{{tab.label}}</template>
    {{tab.content}}
    <br>
    <br>
    <br>
    <md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
  </md-tab>
</md-tab-group>

<!-- Simple tabs api -->
<h1>Tabs with simplified api</h1>
<md-tab-group class="demo-tab-group">
  <md-tab label="Earth">
    This tab is about the Earth!
  </md-tab>
  <md-tab label="Fire">
    This tab is about combustion!
  </md-tab>
</md-tab-group>